<template>
    <div class="contractType">
        <div class="card-box">
            <div class="card-title">工程信息</div>
            <el-form ref="engineering" :model="engineering" class="form-wrap" size="small" :rules="engineering_rules" label-position="top">
                <el-form-item label="工程名称" prop="projectName">
                    <el-input readonly suffix-icon="el-icon-search" v-model="engineering.projectName" maxlength="100" placeholder="请输入工程名称" @click.native="handleClickProjectName"></el-input>
                </el-form-item>
                <el-form-item label="工程地址" prop="projectAddress">
                    <el-input readonly v-model="engineering.projectAddress" maxlength="100" placeholder="请输入工程地址"></el-input>
                </el-form-item>
                <el-form-item label="工程类型" prop="projectType">
                    <el-input readonly v-model="engineering.projectType" maxlength="100" placeholder="请输入工程类型"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="card-box">
            <div class="card-title">合同信息</div>
            <el-form ref="projectContract" :model="projectForm.projectContract" class="form-wrap" size="small" :rules="projectContract_rules" label-position="top">
                <el-form-item label="合同编号" prop="contractNum">
                    <el-input v-model="projectForm.projectContract.contractNum" maxlength="50" placeholder="请输入合同编号"></el-input>
                </el-form-item>
                <el-form-item label="合同类型" prop="contractType">
                    <el-select v-model="projectForm.projectContract.contractType" placeholder="请选择合同类型">
                        <el-option
                            v-for="item in contractTypes"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="合同金额(元)" prop="contractAmount">
                    <el-input v-model="projectForm.projectContract.contractAmount" maxlength="18" placeholder="请输入合同金额" @blur="handleContractAmount"></el-input>
                </el-form-item>
                <el-form-item label="单价(元/m²)" prop="unitPrice">
                    <el-input v-model="projectForm.projectContract.unitPrice" maxlength="18" placeholder="请输入单价"></el-input>
                </el-form-item>
                <el-form-item label="签订日期" prop="contractDate">
                    <el-date-picker
                        v-model="projectForm.projectContract.contractDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        placeholder="请选择签订日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="合同开始日期" prop="startDate">
                    <el-date-picker
                        v-model="projectForm.projectContract.startDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        placeholder="请选择合同开始日期"
                        @change="handleChooseStartDate"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="合同结束日期" prop="endDate">
                    <el-date-picker
                        v-model="projectForm.projectContract.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        placeholder="请选择合同结束日期"
                        @change="handleChooseEndDate"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="乙方单位名称" prop="partybUnit">
                    <el-input v-model="projectForm.projectContract.partybUnit" maxlength="100" placeholder="请输入乙方单位名称"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="partybContact">
                    <el-input v-model="projectForm.projectContract.partybContact" maxlength="100" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="partybPhone">
                    <el-input v-model="projectForm.projectContract.partybPhone" maxlength="100" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="是否有补充协议" prop="supplement">
                    <el-select v-model="projectForm.projectContract.supplement" @change="changeSupplement" placeholder="请选择合同类型">
                        <el-option
                            v-for="item in supplements"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="补充协议签订日期" prop="signDate" v-if="projectForm.projectContract.supplement === '1'">
                    <el-date-picker
                        v-model="projectForm.projectContract.signDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        placeholder="请选择合同结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="补充协议期限" prop="suppleStart" v-if="projectForm.projectContract.supplement === '1'">
                    <el-date-picker type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    v-model="projectForm.projectContract.suppleStart"
                                    format="yyyy-MM-dd"
                                    valueFormat="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="补充协议金额(元)" prop="suppleAmount" v-if="projectForm.projectContract.supplement === '1'">
                    <el-input v-model="projectForm.projectContract.suppleAmount" maxlength="18" placeholder="请输入补充协议金额" @blur="handleSuppleAmount"></el-input>
                </el-form-item>
                <el-form-item label="备注" class="full" prop="remarks">
                    <el-input v-model="projectForm.projectContract.remarks" maxlength="200" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="card-box" v-if="projectForm.projectContract.supplement === '1'">
            <div class="card-title">补充协议</div>
            <div class="handling-opinions">
                <v-upload
                    ref="supplementaryUpload"
                    :busId="projectForm.projectContract.projectContractId"
                    modelType="supplementary"
                    @onSuccess="supplementarySuccess"
                    @loadCompleted="supplementaryLoadCompleted"
                    isShowFileList
                    :isView="false"
                    multiple
                    v-model="supplementaryFileList"/>
            </div>
        </div>
        <div class="card-box">
            <div class="card-title">附件</div>
            <div class="handling-opinions">
                <v-upload
                    ref="normalUpload"
                    :busId="projectForm.projectContract.projectContractId"
                    modelType="normal"
                    @onSuccess="onSuccess"
                    @loadCompleted="normalLoadCompleted"
                    isShowFileList
                    :isView="false"
                    multiple
                    v-model="fileList"/>
            </div>
        </div>
        <div class="card-box">
            <div class="card-title">子合同信息</div>
            <div class="handling-opinions">
                <el-button type="text" plain class="btn" @click="superInforAdd">添加</el-button>
                <el-table :data="projectForm.subContracts" align="center">
                    <el-table-column prop="contractNum" label="合同编号" width="120">
                    </el-table-column>
                    <el-table-column prop="contractType" label="合同类型" width="120">
                        <template slot-scope="scope">
                            <span>{{getCardTypeValue(scope.row.contractType,contractTypes)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contractDate" label="签订日期" width="120">
                    </el-table-column>
                    <el-table-column prop="contractAmount" label="合同金额（元）" width="120">
                    </el-table-column>
                    <el-table-column prop="partybUnit" label="乙方单位名称" width="120">
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClickEdit(scope)" type="text" size="small">编辑</el-button>
                            <el-button type="text" size="small" @click.native.prevent="handleClickDelete(scope.$index, projectForm.subContracts)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="card-box">
            <div class="handling-commit">
                <el-button type="primary" plain class="btn" v-throttle="[commit]">保存</el-button>
            </div>
        </div>
        <!--        工程弹框-->
        <choose-dialog ref="chooseDialog" v-bind="chooseDialogAttrs" @chooseData="handleClickAdd" />
        <subContract ref="subContract" @handleDialogsSave="handleDialogsSave" @handleClose="handleClose" v-if="editDataShow" @beforeClose="handleClose" />
    </div>
</template>

<script src="./edit-data.js">

</script>

<style scoped lang='scss'>
    @include formWrap(4);
    .contractType {
        .card-box {
            margin: 16px 24px;
            .handling-opinions {
                padding: 20px;
                .btn {
                    margin: 10px;
                    float: right;
                }
            }
            .handling-commit {
                min-height: 55px;
                .btn {
                    margin: 10px;
                    float: right;
                }
            }
        }
    }
</style>
